<template>
  <div>
    <div class="share-page">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/system-config' }"
          >系统配置</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="monitoring-content">
      <div class="title">系统配置</div>
      <div class="tables">
        <div class="search">
          <el-form
            :inline="true"
            label-width="160px"
            label-position="right"
            :model="formInline"
            style="width: 100%"
          >
            <el-form-item label="开启无仓库模式" style="width: 100%">
              <el-switch
                v-model="formInline.data"
                inline-prompt
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
            <el-form-item label="区别说明" style="width: 100%">
              <div class="box">
                <div class="box-title">
                  无仓库模式无需维护仓库模块，补货员可以直接补货，省去提货审核环节。主要区别如下：
                </div>
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    v-for="(item, index) in headerArr"
                    :key="index"
                  >
                    <template #default="scope">
                      <div v-if="item.prop == 'yes'">
                        <el-icon color="#0071bb" :size="20"><Select /></el-icon>
                      </div>
                      <div v-if="item.prop == 'no'">
                        <el-icon color="#0071bb" :size="20"><CloseBold /></el-icon>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="flex-c">
      <el-button round color="#0071bb">保存</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from "vue";
import type { ComponentSize } from "element-plus";
import {
  Refresh,
  Search,
  RefreshLeft,
  HelpFilled,
  Plus,
  CloseBold,
  Select,
} from "@element-plus/icons-vue";
const currentPage = ref(1);
const pageSize = ref(1);
const size = ref<ComponentSize>("small");
const disabled = ref(false);
const tableData = [
  {
    id: "1",
    name: "伯克材料3668649",
    step: "派单",
    type: "离线报警",
    status: "正常",
  },
  {
    id: "1",
    name: "伯克材料3668649",
    step: "派单",
    type: "离线报警",
    status: "正常",
  },
];
const formInline = ref({
  data: false,
});

const headerArr = ref<any>([
  { label: "功能", prop: "type", show: true },
  { label: "有仓模式", prop: "yes", show: true },
  { label: "无仓模式", prop: "no", show: true },
]);
</script>
<style lang="scss" scoped>
:deep() {
  .el-form-item__content {
    width: 100% !important;
  }
  th {
    background: #00ffff !important;
    color: rgb(77, 77, 77) !important;
  }
}
.title {
  color: #4d4d4d;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
}
.monitoring-content {
  background: #fff;
  padding: 10px 10px 0px 10px;
}

.search {
  margin: 20px 80px;
  .box {
    border: 1px solid #ccc;
    padding: 20px;
    width: 100% !important;
  }
  .box-title {
    color: #606266;
    margin: 10px 0px;
  }
}

.search-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .btn {
    align-self: right;
  }
}
.mx-10 {
  margin: 0px 10px;
}
.flex-s {
  display: flex;
  align-content: center;
  justify-content: start;
}
.flex-c {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
.page_number {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

.tables {
  margin-top: 10px;
}
.type2 {
  color: #71abd8;
}
</style>
